<template>
    <div class="navbar">
        <van-row type="flex">
            <van-col span="3" class="div1">
                <van-icon @click="$router.go(-1)" name="arrow-left"/>
            </van-col>
            <van-col span="13">
                <div>
                    <van-search shape="round" show-action v-model="value" placeholder="请输入搜索关键词" @search="onSearch">
                        <template #action>
                            <div @click="selectClick">
                                <van-icon name="arrow-down"/>
                            </div>
                        </template>
                    </van-search>

                    <van-action-sheet v-model="big_active" cancel-text="取消" :actions="big_genre"
                                      @select="selectChange"/>
                </div>
            </van-col>
            <van-col class="div3" span="8">
                <img :src="image" v-if="image">
                <img src="../../assets/default_img.jpg" v-else>
                <p @click="$router.push('/userinfo/'+new Date().getTime())">个人中心</p>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    export default {
        name: "navbar",
        data() {
            return {
                value: "",
                image: "",
                big_active: false,
                big_genre: [{name: '小说'}, {name: '电影/电视剧/动漫'}],
                active_genre: "",
                isRouterAlive: true
            }
        },
        mounted: function () {
            this.image = JSON.parse(localStorage.getItem("user")).img
        },
        methods: {
            selectChange(data) {
                this.active_genre = data.name
                this.big_active = false;
            },
            selectClick() {
                this.big_active = true;
            },
            async onSearch() {
                await this.$router.push({
                    path: "/searchResult/" + this.value,
                    query: {wd: this.value, active_genre: this.active_genre}
                })
            },
            onCancel() {
                this.value = ""
            },
        },
        watch: {
            '$route': function (to, from) {
                console.log(to.nameL)
                this.image = JSON.parse(localStorage.getItem("user")).img
            }
        }
    }
</script>

<style lang="less">
    .navbar {
        /*margin-top: 8.33vw;*/
        /*height: 18.5vw;*/
        background-color: white;
        /*display: flex;*/
        align-items: center;


        .div1 {
            justify-content: center;
            display: flex;
            align-items: center;
        }

        div:nth-child(2) {
            display: flex;
            /*width: 50%;*/
            align-items: center;
        }

        .div3 {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                border-radius: 50%;
                width: 6.67vw;
                height: 6.67vw;

            }

            p {
                /*height: 6.67vw;*/
                padding: 1.39vw 2.78vw;
                margin: 0 2.22vw;
                background-color: #fb7299;
                color: white;
                border-radius: 1.11vw;
                font-size: 3.61vw;
            }
        }
    }
</style>